<template>
  <el-form ref="formobj" :model="lyform" :rules="rules" label-width="100px">
    <el-form-item label="号别编码" prop="code">
      <el-input v-model="lyform.code" maxlength="64" placeholder="请输入号别编码"></el-input>
    </el-form-item>
    <el-form-item label="号别名称" prop="name">
      <el-input v-model="lyform.name" maxlength="64" placeholder="请输入号别名称"></el-input>
    </el-form-item>
    <el-form-item label="挂号费" prop="fee">
      <el-input v-model="lyform.fee" maxlength="64" placeholder="请输入挂号费"></el-input>
    </el-form-item>
    <el-form-item label="挂号限额 " prop="quota">
      <el-input v-model.number="lyform.quota" maxlength="64" placeholder="请输入挂号限额"></el-input>
    </el-form-item>
    <el-form-item label="顺序号" prop="sequenceNo">
      <el-input v-model.number="lyform.sequenceNo" maxlength="64" placeholder="请输入顺序号"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="save">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { post, get } from '@/utils/axios';
import { ElMessage } from 'element-plus';
import { url } from './api'
import {copy} from 'copy-anything'
const props = defineProps(['id'])

const lyform = reactive({
  code: '',
  name: '',
  fee: '',
  quota: '',
  sequenceNo: ''
})
if(props.id){
  getById()
}
const emits = defineEmits(['update:show', 'getTableData'])
const rules = reactive({
  code: [
    { required: true, message: '请输入号别编码', trigger: 'blur' },
    { validator: (rule, value, callback) => { check(rule, value, callback, 'code') }, message: '该号别编码已经存在', trigger: 'blur'  }
  ],
  name: [
    { required: true, message: '请输入号别名称', trigger: 'blur' },
    { validator: (rule, value, callback) => { check(rule, value, callback, 'name') }, message: '该号别名称已经存在', trigger: 'blur'  }
  ],
  fee: [
    { required: true, message: '请输入挂号费', trigger: 'blur' },
    { pattern: /^[0-9]+(\.[0-9]{1,2})?$/, message: '请输入正确的金额', trigger: 'blur' }
  ],
  quota: [
    { required: true, message: '请输入挂号限额', trigger: 'blur' },
    { type: 'integer', message: '只能输入整数', trigger: 'blur' }
  ],
  sequenceNo: [
    { required: true, message: '请输入显示顺序号 ', trigger: 'blur' },
    { type: 'integer', message: '只能输入整数', trigger: 'blur' }
  ]
})
const formobj = ref()
function getById(){
  get(url.getById, { id: props.id }, content => {
    for(let key in lyform){   /// 使用循环赋值
      if(Object.prototype.hasOwnProperty.call(content, key)){// 判断是否是自身属性
        lyform[key] = content[key]
      }
    }
    lyform.id = props.id
    lyform.fee = lyform.fee / 100
  })
}
function save () {
  lyform.fee = lyform.fee * 100
  post(props.id ? url.update : url.add, lyform, content => { //异步操作
    emits('update:show', false)
    emits('getTableData')
  }, formobj)
}
function check (rule, value, callback, field) {
  get(url.check, { field, value, id: props.id }, content => {
    if (content) {
      callback()
    } else {
      callback(new Error())
    }
  })
}
</script>

<style lang="scss" scoped>
</style>